<template>
  <div class="icon__container">
    <div class="app-container-main">
      <div class="Top">
        <p>全部简历</p>
      </div>
      <div class="Body">
        <div class="Filter">
          <a-space :size="15">
            <a-input-group compact class="InputGroup">
              <a-select v-model:value="searchMethod" style="width: 120px">
                <a-select-option value="0">简历名称</a-select-option>
                <a-select-option value="1">简历联系方式</a-select-option>
                <a-select-option value="2">会员联系方式</a-select-option>
                <a-select-option value="3">简历ID</a-select-option>
              </a-select>
              <a-input-search
                v-model:value="searchValue"
                @search="onSearch"
                placeholder="请输入搜索内容"
                style="width: 330px"
              >
                <template #enterButton>
                  <a-button style="background: #f5f7fa"
                    ><template #icon>
                      <SearchOutlined style="color: #b8bcbd" /> </template
                  ></a-button>
                </template>
              </a-input-search>
            </a-input-group>
            <a-cascader
              v-model:value="yxdqvalue"
              :options="options"
              placeholder="请选择意向地区"
              style="width: 200px; margin-top: 15px"
            />
            <a-cascader
              v-model:value="yxzwvalue"
              :options="options1"
              placeholder="请选择意向职位"
              style="width: 200px; margin-top: 15px"
            />
            <a-select
              v-model:value="zclyvalue"
              show-search
              placeholder="请选择注册来源"
              style="width: 200px; margin-top: 15px; line-height: 40px"
              :options="options2"
              @focus="focus"
              @blur="handleBlur"
              @change="handleChange"
            />
          </a-space>
          <a-button
            type="primary"
            style="float: right; margin-top: 15px; margin-right: 20px"
            >新增简历</a-button
          >
        </div>
        <div class="Table">
          <resumetableVue
            :datas="data"
            @showDrawer="showDrawer"
          ></resumetableVue>
        </div>
        <div class="row">
          <div class="row-button">
            <a-button type="primary">全选/反选</a-button>
            <a-button type="primary">刷新简历</a-button>
            <a-button type="primary">审核简历</a-button>
            <a-button type="primary">简历等级</a-button>
            <a-button type="primary">导入简历</a-button>
          </div>
          <div class="row-pagination">
            <a-pagination
              v-model:current="current1"
              show-quick-jumper
              :total="data.length"
              :show-total="(total) => `Total ${total} items`"
              @change="onChange"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="Drawer">
      <a-drawer
        placement="right"
        :closable="false"
        :visible="visible"
        @close="onClose"
        width="1440"
      >
        <div class="Detailed">
          <div class="Img">
            <img
              src="http://houtai.74cmsse.tywangcai.com/upload/resource/empty_photo.png"
              alt=""
            />
          </div>
          <div class="Messages">
            <p class="Name">
              <span>WLL</span>
              <span
                >（ 会员ID：558；简历ID：261；<a>一键登录个人会员中心</a>；<a
                  >生成海报</a
                >
                ）</span
              >
            </p>
            <p class="Age">基础资料：<span>1岁 | 本科 | 一年</span></p>
            <p class="Full">
              完整度：
              <span>
                <a-progress
                  :percent="75"
                  size="small"
                  style="display: inline-block; width: 150px"
                  trailColor="#ebeef5"
                  strokeColor="rgb(29, 183, 90)"
                />
                <!-- <a-progress :percent="record.integrityrungs" size="small" strokeColor="rgb(29, 183, 90)" v-if="(record.integrityrungs>50 && record.integrityrungs<80)" />
              <a-progress :percent="record.integrityrungs" size="small" strokeColor="rgb(251, 60, 17)" v-else-if="(record.integrityrungs<=50)" />
              <a-progress :percent="record.integrityrungs" size="small" v-else /> -->
              </span>
            </p>
            <p class="Fuwu">
              服务号绑定状态：
              <img src="../../imgs/微信图标.png" alt="" />
              <a>邀请绑定</a>
              <a>刷新结果</a>
            </p>
          </div>
          <div class="Idmessage">
            <p class="Jifen">账号积分：<span>75</span></p>
            <p class="Refreshtime">
              刷新时间：<span>2022-12-05 11:46</span><a>刷新简历</a>
            </p>
          </div>
        </div>
        <a-tabs v-model:activeKey="activeKey" style="width: 100%" class="Tabs">
          <a-tab-pane key="1" tab="跟进记录" class="gjjl">
            <div class="Left">
              <a-form
                name="custom-validation"
                ref="formRef"
                :model="formState"
                :rules="rules"
                v-bind="layout"
                @finish="handleFinish"
                @finishFailed="handleFinishFailed"
                class="Form"
                labelAlign="right"
              >
                <a-form-item has-feedback label="跟进方式" name="method">
                  <a-select
                    ref="select"
                    v-model:value="value1"
                    @focus="focus"
                    @change="handleChange"
                    style="margin-left: 10px"
                    placeholder="请选择"
                  >
                    <a-select-option value="当面拜访">当面拜访</a-select-option>
                    <a-select-option value="电话拜访">电话拜访</a-select-option>
                    <a-select-option value="网络拜访">网络拜访</a-select-option>
                    <a-select-option value="其它拜访">其它拜访</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item has-feedback label="下次跟进" name="checkPass">
                  <a-date-picker
                    v-model:value="formState.checkPass"
                    style="margin-left: 10px; height: 38px; width: 533px"
                    show-time
                    placeholder="请选择日期时间"
                  />
                </a-form-item>
                <a-form-item has-feedback label="跟进结果" name="age">
                  <a-textarea
                    v-model:value="formState.age"
                    allow-clear
                    style="margin-left: 10px"
                    :rows="9"
                  />
                </a-form-item>
                <a-form-item has-feedback label="添加图片" name="age">
                  <a-upload-dragger
                    v-model:fileList="fileList"
                    name="file"
                    :multiple="true"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChange1"
                    style="margin-left: 10px; height: 180px"
                  >
                    <p class="ant-upload-drag-icon">
                      <img src="../../imgs/上传.png" alt="" />
                    </p>
                    <p class="ant-upload-text">
                      将图片拖到此处, 或<a>点击上传</a>
                    </p>
                    <p class="ant-upload-hint">图片上传仅支持jpg/png格式</p>
                  </a-upload-dragger>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                  <a-button
                    type="primary"
                    html-type="submit"
                    style="margin-left: 10px;height: 38px;border-radius: 5px;background-color: #559eff;width: 126px;"
                    >保存跟进记录</a-button
                  >
                </a-form-item>
              </a-form>
            </div>
            <div class="Right">
              <div class="Top">
                <p>历史跟进</p>
                <p>共有 <span>1条</span> 跟进</p>
              </div>
              <div class="Body">
                <div class="ListItem">
                  <div class="Imgs">
                    <p>admin</p>
                  </div>
                  <div class="Details">
                    <p class="Title">
                      <span>admin</span> 网络拜访 <span>WLL</span>
                      <span>2022-12-06 11:44:56</span>
                    </p>
                    <p class="Message">123</p>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="简历详情">简历详情</a-tab-pane>
          <a-tab-pane key="3" tab="会员信息">会员信息</a-tab-pane>
          <a-tab-pane key="4" tab="求职动态">求职动态</a-tab-pane>
          <a-tab-pane key="5" tab="会员积分">
            <a-table :data-source="data1" style="width: 96%; margin: 0 auto" :pagination="false">
              <a-table-column key="laiyuan" title="积分来源" data-index="laiyuan" width="24%" />
              <a-table-column key="leixing" title="类型" data-index="leixing" width="24%" />
              <a-table-column key="time" title="时间" data-index="time" width="24%" />
              <a-table-column key="jifen" title="积分" data-index="jifen" width="24%" />
            </a-table>
            <a-pagination
              v-model:current="current2"
              show-quick-jumper
              :total="data1.length"
              :show-total="(total) => `Total ${total} items`"
              @change="onChange"
              style="margin-top: 15px;float:right;margin-right: 2%;"
            />
          </a-tab-pane>
          <a-tab-pane key="6" tab="操作日志">操作日志</a-tab-pane>
        </a-tabs>
      </a-drawer>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from "vue";
import aIcon from "@/components/aicon/aicon.vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import resumetableVue from "./resumetable.vue";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "el_icon",
  components: {
    aIcon,
    SearchOutlined,
    resumetableVue,
  },
  setup() {
    const visible = ref<boolean>(false);

    const showDrawer = () => {
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    const searchMethod = ref("0");
    const searchValue = ref("");
    const yxdqvalue = ref("");
    const yxzwvalue = ref("");
    const current1 = ref(1);
    const current2 = ref(1);
    const zclyvalue = ref(undefined);
    const options = [
      {
        value: "深圳",
        label: "深圳",
        children: [
          {
            value: "合肥",
            label: "合肥",
            children: [
              {
                value: "瑶海区",
                label: "瑶海区",
              },
              {
                value: "庐阳区",
                label: "庐阳区",
              },
              {
                value: "蜀山区",
                label: "蜀山区",
              },
              {
                value: "包河区",
                label: "包河区",
              },
            ],
          },
          {
            value: "芜湖",
            label: "芜湖",
            children: [
              {
                value: "周口",
                label: "周口",
              },
              {
                value: "镜湖区",
                label: "镜湖区",
              },
              {
                value: "弋江区",
                label: "弋江区",
              },
              {
                value: "鸠江区",
                label: "鸠江区",
              },
            ],
          },
          {
            value: "蚌埠",
            label: "蚌埠",
            children: [
              {
                value: "龙子湖区",
                label: "龙子湖区",
              },
              {
                value: "蚌山区",
                label: "蚌山区",
              },
              {
                value: "禹会区",
                label: "禹会区",
              },
              {
                value: "淮上区",
                label: "淮上区",
              },
            ],
          },
          {
            value: "淮南",
            label: "淮南",
            children: [
              {
                value: "大通区",
                label: "大通区",
              },
              {
                value: "田家庵区",
                label: "田家庵区",
              },
              {
                value: "谢家集区",
                label: "谢家集区",
              },
              {
                value: "八公山区",
                label: "八公山区",
              },
            ],
          },
        ],
      },
      {
        value: "福建",
        label: "福建",
        children: [
          {
            value: "南安市",
            label: "南安市",
            children: [
              {
                value: "官桥镇",
                label: "官桥镇",
              },
            ],
          },
          {
            value: "厦门市",
            label: "厦门市",
            children: [],
          },
        ],
      },
    ];
    const options1 = [
      {
        value: "生活|aa",
        label: "生活|aa",
        children: [
          {
            value: "餐饮",
            label: "餐饮",
            children: [
              {
                value: "服务员111",
                label: "服务员111",
              },
              {
                value: "后厨",
                label: "后厨",
              },
              {
                value: "传菜员",
                label: "传菜员",
              },
              {
                value: "配菜/打荷",
                label: "配菜/打荷",
              },
            ],
          },
          {
            value: "家政保洁/安保",
            label: "家政保洁/安保",
            children: [
              {
                value: "保洁",
                label: "保洁",
              },
              {
                value: "保姆",
                label: "保姆",
              },
              {
                value: "月嫂",
                label: "月嫂",
              },
              {
                value: "育婴师/保育员",
                label: "育婴师/保育员",
              },
            ],
          },
          {
            value: "美容/美发",
            label: "美容/美发",
            children: [
              {
                value: "发型师",
                label: "发型师",
              },
              {
                value: "美发助理/学徒",
                label: "美发助理/学徒",
              },
              {
                value: "洗头工",
                label: "洗头工",
              },
              {
                value: "美容导师",
                label: "美容导师",
              },
            ],
          },
          {
            value: "酒店/旅游",
            label: "酒店/旅游",
            children: [
              {
                value: "酒店前台111",
                label: "酒店前台111",
              },
              {
                value: "客房服务员",
                label: "客房服务员",
              },
              {
                value: "楼面经理",
                label: "楼面经理",
              },
              {
                value: "行李员",
                label: "行李员",
              },
            ],
          },
        ],
      },
      {
        value: "人力|行政|管理",
        label: "人力|行政|管理",
        children: [
          {
            value: "人事/行政/后勤",
            label: "人事/行政/后勤",
            children: [
              {
                value: "文员",
                label: "文员",
              },
            ],
          },
          {
            value: "司机",
            label: "司机",
            children: [
              {
                value: "商务司机",
                label: "商务司机",
              },
              {
                value: "客运司机",
                label: "客运司机",
              },
            ],
          },
        ],
      },
    ];
    const options2 = ref([
      {
        value: "APP",
        label: "APP",
      },
      {
        value: "手机浏览器",
        label: "手机浏览器",
      },
      {
        value: "微信浏览器",
        label: "微信浏览器",
      },
      {
        value: "微信小程序",
        label: "微信小程序",
      },
      {
        value: "抖音小程序",
        label: "抖音小程序",
      },
    ]);
    const columns = [
      {
        title: "ID",
        width: 100,
        dataIndex: "name",
        key: "name",
        fixed: "left",
      },
      {
        title: "照片",
        width: 100,
        dataIndex: "age",
        key: "age",
        fixed: "left",
      },
      {
        title: "姓名",
        dataIndex: "address",
        key: "1",
        width: 100,
        fixed: "left",
      },
      {
        title: "微信绑定",
        dataIndex: "address",
        key: "2",
        width: 100,
        fixed: "left",
      },
      {
        title: "学历",
        dataIndex: "address",
        key: "3",
        width: 100,
        fixed: "left",
      },
      {
        title: "经验",
        dataIndex: "address",
        key: "4",
        width: 100,
      },
      {
        title: "简历完整度",
        dataIndex: "address",
        key: "5",
        width: 100,
      },
      {
        title: "审核状态",
        dataIndex: "address",
        key: "6",
        width: 100,
      },
      {
        title: "简历联系方式",
        dataIndex: "address",
        key: "7",
        width: 100,
      },
      {
        title: "会员联系方式",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "等级",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "投递数",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "被下载",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "被查看",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "被面邀",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "刷新时间",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "登录时间",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "注册时间",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "联系状态",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "跟进次数",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "最后跟进",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "简历备注",
        dataIndex: "address",
        key: "8",
        width: 100,
      },
      {
        title: "操作",
        key: "operation",
        fixed: "right",
        width: 100,
        slots: {
          customRender: "action",
        },
      },
    ];
    const data = ref([
      {
        auditstatus: true,
        id: "1",
        img: "http://houtai.74cmsse.tywangcai.com/upload/resource/empty_photo.png",
        name: "WLL",
        wxbind: false,
        educationback: "本科",
        experience: 1,
        integrityrungs: 80,
        concatway1: "15695092293",
        concatway2: "15695092293",
        grade: true,
        delivernumber: 1,
        bedownloaded: 0,
        beviewed: 1,
        beonesside: 0,
        refreshtime: "2022-12-05 11:46",
        logintime: "2021-07-27 09:06",
        registtime: "2021-05-26 15:06",
        concatstatus1: true,
        concatstatus2: true,
        followupnum: 1,
        lastfollow: "2022-11-09 10:44:36",
        comment: "",
      },
      {
        auditstatus: true,
        id: "1",
        img: "http://houtai.74cmsse.tywangcai.com/upload/resource/empty_photo.png",
        name: "WLL",
        wxbind: true,
        educationback: "本科",
        experience: 1,
        integrityrungs: 80,
        concatway1: "15695092293",
        concatway2: "15695092293",
        grade: true,
        delivernumber: 1,
        bedownloaded: 0,
        beviewed: 1,
        beonesside: 0,
        refreshtime: "2022-12-05 11:46",
        logintime: "2021-07-27 09:06",
        registtime: "2021-05-26 15:06",
        concatstatus1: true,
        concatstatus2: true,
        followupnum: 1,
        lastfollow: "2022-11-09 10:44:36",
        comment: "",
      },
    ]);
    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record: any) => ({
        disabled: record.name === "Disabled User",
        // Column configuration not to be checked
        name: record.name,
      }),
    };

    onMounted(() => {});
    const onSearch = () => {
      console.log(111);
    };
    const focus = () => {
      console.log("focus");
    };
    const handleBlur = () => {
      console.log("blur");
    };
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };
    const onChange = (number: any) => {
      console.log("Page: ", number);
    };
    const onChange1 = (number: any) => {
      console.log("Page: ", number);
    };
    const current = ref<string[]>(["mail"]);
    const clickmenu = (item: any) => {
      console.log(item.key);
    };
    const activeKey = ref("1");
    const formRef = ref();
    const formState = reactive({
      pass: "",
      checkPass: "",
      age: undefined,
    });
    const rules = {};
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 18,
      },
    };

    const handleFinish = (values: any) => {
      console.log(values, formState);
    };

    const handleFinishFailed = (errors: any) => {
      console.log(errors);
    };
    const value1 = ref(null);
    const fileList = ref([]);
    const handleChange1 = (info: any) => {
      const status = info.file.status;

      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }

      if (status === "done") {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    };
    const columns1 = [
      { title: "积分来源", dataIndex: "laiyuan" },
      { title: "类型", dataIndex: "leixing" },
      { title: "时间", dataIndex: "time" },
      { title: "积分", dataIndex: "jifen" },
    ];
    const data1 = ref([
      {
        id: "1",
        laiyuan: "简历完整度达到60%",
        leixing: "增加",
        time: "2022-11-11 09:36",
        jifen: "20",
      },
      {
        id: "2",
        laiyuan: "每日签到",
        leixing: "增加",
        time: "2021-06-04 15:17",
        jifen: "5",
      },
      {
        id: "3",
        laiyuan: "注册账号",
        leixing: "增加",
        time: "2021-05-26 15:06",
        jifen: "50",
      },
    ]);
    return {
      current,
      current2,
      handleChange1,
      fileList,
      value1,
      formState,
      formRef,
      rules,
      layout,
      handleFinishFailed,
      handleFinish,
      clickmenu,
      searchMethod,
      searchValue,
      onSearch,
      yxdqvalue,
      focus,
      handleChange,
      options,
      options1,
      options2,
      yxzwvalue,
      zclyvalue,
      handleBlur,
      columns,
      data,
      columns1,
      data1,
      rowSelection,
      onChange,
      onChange1,
      current1,
      visible,
      showDrawer,
      onClose,
      activeKey,
    };
  },
});
</script>
<style lang="scss">
.icon__container {
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;
  padding-bottom: 15px;
  .app-container-main {
    padding-bottom: 15px;
    .Top {
      width: 100%;
      height: 55px;
      line-height: 55px;
      border-bottom: 1px solid #ebeef5;

      p {
        font-size: 16px;
        margin-left: 1%;
      }
    }
    .Body {
      width: 100%;
      .Filter {
        width: 100%;
        .ant-btn-icon-only {
          width: 60px;
          height: 40px;
          line-height: 40px;
        }
        .ant-input {
          height: 40px;
          line-height: 40px;
        }
        .ant-select-single .ant-select-selector,
        .ant-select-single .ant-select-selection-item,
        .ant-select-selection-search-input {
          height: 40px;
          line-height: 40px;
          color: #6b6b6b;
        }
        .InputGroup {
          width: 450px;
          margin-top: 15px;
          margin-left: 15px;
        }
        // .ant-input-group{
        //   float: left;
        // }
        // .select1{
        //   float: left;
        // }
      }
      .row {
        width: 98%;
        margin: 0 auto;
        margin-top: 15px;
      }
    }
  }
}
.ant-drawer-body {
  padding: 0;
}
.Detailed {
  height: 165px;
  border-bottom: 1px solid #ebeef5;
  .Img {
    float: left;
    width: 120px;
    margin-top: 20px;
    margin-left: 25px;
    img {
      width: 120px;
    }
  }
  .Messages {
    margin-left: 22px;
    float: left;
    width: 43%;
    .Name {
      font-size: 20px;
      font-weight: bold;
      margin-top: 20px;
      span:last-child {
        font-size: 13px;
        font-weight: 450;
        color: #777777;
        a {
          font-weight: 500;
        }
      }
    }
    .Age {
      color: #777777;
      margin-top: -5px;
      span {
        color: black;
      }
    }
    .Full {
      color: #777777;
      margin-top: -7px;
    }
    .Fuwu {
      color: #777777;
      margin-top: -7px;
      img {
        width: 16px;
        margin-top: -2px;
      }
      a {
        margin-left: 5px;
      }
    }
  }
  .Idmessage {
    float: left;
    height: 160px;
    .Jifen {
      color: #777777;
      margin-top: 60px;
      span {
        color: black;
      }
    }
    .Refreshtime {
      color: #777777;
      margin-top: -7px;
      span {
        color: black;
      }
      a {
        margin-left: 15px;
      }
    }
  }
}
.Tabs .ant-tabs-nav {
  margin-left: 2%;
  height: 50px;
}
.Tabs .ant-tabs-nav-scroll {
  background-color: #fcfcfc;
  border-bottom: 1px solid #ebeef5;
}
.gjjl {
  width: 100%;
  height: 756px;
  margin-top: -17px;

  .Left {
    width: 50%;
    height: 756px;
    border-right: 1px solid #ebeef5;
    overflow: hidden;
    float: left;
    .Form {
      margin-top: 30px;
      .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
        height: 38px;
        line-height: 38px;
      }
      .ant-select-single:not(.ant-select-customize-input)
        .ant-select-selector
        .ant-select-selection-search-input {
        height: 38px;
      }
      .ant-calendar-picker-input.ant-input {
        line-height: 28px;
      }
      .ant-upload.ant-upload-drag {
        height: 180px;
        background-color: white;
        border: 1px dashed #559eff;
      }
      .ant-upload-drag-icon {
        margin-top: 15px;
        img {
          width: 60px;
        }
      }
      .ant-upload-text {
        font-size: 13px;
        color: #606266;
      }
      .ant-upload-hint {
        color: #606266;
      }
    }
  }
  .Right {
    width: 50%;
    float: left;
    .Top {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ebeef5;
      p:first-child {
        float: left;
        margin-left: 20px;
        font-weight: bold;
      }
      p:last-child {
        float: right;
        margin-right: 20px;
        span {
          color: #7286b2;
        }
      }
    }
    .Body {
      width: 95%;
      margin: 0 auto;
      .ListItem {
        width: 100%;
        height: 128px;
        border-bottom: 1px dashed #dcdfe6;
        .Imgs {
          width: 10%;
          height: 128px;
          margin-left: -8.6%;
          float: left;
          p {
            width: 45px;
            height: 45px;
            line-height: 45px;
            border-radius: 50%;
            color: white;
            font-size: 16px;
            text-align: center;
            background-color: #5888f9;
            margin-top: 20px;
          }
        }
        .Details {
          width: 89%;
          float: left;
          .Title {
            font-size: 15px;
            margin-top: 10px;
            span {
              font-weight: bold;
              color: #7286b2;
            }
            span:last-child {
              color: #9999b3;
              font-weight: normal;
              float: right;
            }
          }
          .Message {
            height: 45px;
            line-height: 45px;
            padding-left: 3%;
            width: 101%;
            background-color: #f7f7f7;
          }
        }
      }
    }
  }
}
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>